<template>
  <component
    :is="components[currentComponent]"
    @backMemoList="changeComponent"
  ></component>

  <van-floating-bubble
    :icon="icon"
    @click="changeComponent"
    v-model:offset="offset"
  />
</template>
<script setup>
import { ref, onMounted } from "vue";
import Memo from "@/features/Memo/Memo.vue";
import MemoAdd from "@/features/Memo/MemoAdd.vue";
import { getLeftPosition } from "@/utils/bubblePosition";

const offset = ref();

onMounted(() => {
  offset.value = getLeftPosition();
});

const components = {
  Memo,
  MemoAdd,
};
const icon = ref("plus");
const currentComponent = ref("Memo");

function changeComponent() {
  currentComponent.value =
    currentComponent.value === "Memo" ? "MemoAdd" : "Memo";

  icon.value = icon.value === "plus" ? "arrow-left" : "plus";
}
</script>
